Website Security System.
*
*
*
*
*
*
*
*
*
Project Explanation...
Website Security System.
# Html Code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Security System</title> <link defer rel="stylesheet" href="style.css"> <script defer src="app.js"></script> </head> <body> <div class="body"> <h2><span class="orange">'Rising</span><span class="white">Coders</span><span class="green">Era'</span></h2> <h2>Web Security System</h2> <br> <img src="X0XF.gif" class="gif" alt="Security-image" autoplay loop> <h3>Text Captcha</h3> <br> <!-- <p id="texter"></p> --> <input type="text" id="ran-txt" value="This text cannot be copied." readonly oncopy="return false;"> <br><br> <p id="red"> </p> <input type="text" id="texter" placeholder="Enter the above text"> <br><br> <div> <br><br> <button onclick="submit()">I am not a Bot</button> </div> </div> <br><br><br><br><br> </body> </html>
@ Html Code Explanation:
1. `<!DOCTYPE html>`: This line tells the web browser that the document is written in HTML5, the latest version of HTML. 2. `<html lang="en">`: This is the starting point of the HTML document. It tells the browser that the language used in the content is English ("en"). 3. `<head>`: The head section contains meta-information about the webpage, such as the character encoding, viewport settings, and the title that appears in the browser's title bar. 4. `<meta charset="UTF-8">`: This meta tag specifies the character encoding for the webpage, ensuring it can handle special characters from various languages. 5. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: This meta tag sets the initial scale and width of the webpage to match the device's width, ensuring it adapts well to different screen sizes. 6. `<title>Web Security System</title>`: This is the title of the webpage that appears in the browser's title bar or tab. 7. `<link defer rel="stylesheet" href="style.css">`: This line links an external CSS file called "style.css" to the HTML document. CSS is used to style the webpage and control its appearance. 8. `<script defer src="app.js"></script>`: This line links an external JavaScript file called "app.js" to the HTML document. JavaScript is used to add interactivity and functionality to the webpage. 9. `<body>`: The body section contains the visible content of the webpage that users can see and interact with. 10. `<div class="body">`: This is a division element with the class "body," which is used to group and style elements together. 11. `<h2><span class="orange">'Rising</span><span class="white">Coders</span><span class="green">Era'</span></h2>`: This creates a heading level 2 (h2) with three different spans of text. Each span has a class ("orange," "white," and "green"), which can be used to style the text with CSS. 12. `<h2>Web Security System</h2>`: Another heading level 2 (h2) with the text "Web Security System." 13. `<br>`: These are line breaks, creating empty lines in the content. 14. `<img src="X0XF.gif" class="gif" alt="Security-image" autoplay loop>`: This creates an image element displaying the "X0XF.gif" image file. It has the class "gif" and an "alt" attribute providing alternative text in case the image cannot be displayed. The "autoplay" and "loop" attributes suggest the image will automatically play and loop continuously. 15. `<h3>Text Captcha</h3>`: This is another heading level 3 (h3) with the text "Text Captcha." 16. `<input type="text" id="ran-txt" value="This text cannot be copied." readonly oncopy="return false;">`: This creates an input field of type "text" with the id "ran-txt" and an initial value "This text cannot be copied." It is set to read-only, so users can't modify it, and copying is disabled through the "oncopy" attribute. 17. `<p id="red"></p>`: This creates an empty paragraph element with the id "red." 18. `<input type="text" id="texter" placeholder="Enter the above text">`: This creates another input field of type "text" with the id "texter" and a placeholder text "Enter the above text." Users can type in this field. 19. `<div>`: This is another division element. 20. `<button onclick="submit()">I am not a Bot</button>`: This creates a button element with the text "I am not a Bot." When the button is clicked, it will trigger the "submit()" function in the linked JavaScript file. 21. `<br><br><br><br><br>`: These line breaks create empty space at the end of the page. That's a simple explanation of the HTML code you provided. The webpage appears to be a "Web Security System" with a captcha-like feature, asking users to enter specific text to prove they are not bots.
# CSS Code.
* { margin: 0; padding: 0; } body { background-color: rgb(245, 245, 247); font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } body { /* Disable text selection */ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ user-select: none; /* Non-prefixed version, currently supported in most browsers */ } .orange { color: orange; padding-left: 10px; } .white { color: white; padding-left: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .green { color: green; padding-left: 10px; } .body { margin: auto; margin-top: 100px; text-align: center; background-color: aquamarine; border: 2px dotted rgba(61, 95, 84, 0.911); box-shadow: 2px 2px 2px 2px rgba(0, 128, 0, 0.445); padding: 15px 15px; width: 330px; border-radius: 10px; } .gif { width: 40%; border-radius: 10px; } button { padding: 5px 5px; border-radius: 5px; border: 1px solid gray; cursor: pointer; transition: 1s; } #red { color: red; margin-bottom: 5px; animation: moveLeftAndRight 4s ease-in-out; text-shadow: 2px 2px 4px rgba(124, 111, 111, 0.81); } @keyframes moveLeftAndRight { 0% { transform: translateX(0); } 50% { transform: translateX(-50px); } 70% { transform: translateY(50px); } 100% { transform: translateX(0); } } button:hover { color: #fff; background-color: rgba(0, 0, 0, 0.923); box-shadow: 2px 2px 2px 2px rgba(128, 128, 128, 0.477); } input { text-align: center; border: none; padding: 5px 5px; border: 1px solid gray; outline: none; border-radius: 5px; } .cl { color: red; animation: 8s blink infinite; }
@ CSS Code Explanation:
1. `* { margin: 0; padding: 0; }`: This sets the margin and padding of all elements to zero. This can be useful to remove default spacing between elements. 2. `body { ... }`: This section applies styles to the entire body of the webpage. - `background-color: rgb(245, 245, 247);`: Sets the background color of the body to a light grayish shade. - `font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;`: Specifies a list of font families to use for the text in the body. 3. `body { ... }`: This part disables text selection for the whole body, preventing users from selecting and copying text on the webpage. 4. `.orange { ... }`, `.white { ... }`, `.green { ... }`: These sections define styles for elements with the classes "orange," "white," and "green." - `.orange { color: orange; padding-left: 10px; }`: Sets the text color to orange and adds 10 pixels of left padding. - `.white { color: white; padding-left: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }`: Sets the text color to white, adds 10 pixels of left padding, and applies a subtle text shadow effect. - `.green { color: green; padding-left: 10px; }`: Sets the text color to green and adds 10 pixels of left padding. 5. `.body { ... }`: This section defines styles for elements with the class "body." - `margin: auto; margin-top: 100px;`: Centers the element horizontally and adds 100 pixels of top margin. - `text-align: center;`: Centers the text inside the element. - `background-color: aquamarine;`: Sets the background color to a light blue-green shade. - `border: 2px dotted rgba(61, 95, 84, 0.911);`: Creates a dotted border with a greenish color. - `box-shadow: 2px 2px 2px 2px rgba(0, 128, 0, 0.445);`: Adds a greenish box shadow. - `padding: 15px 15px;`: Adds 15 pixels of padding on the top and bottom and 15 pixels of padding on the left and right. - `width: 330px;`: Sets the width of the element to 330 pixels. - `border-radius: 10px;`: Rounds the corners of the element. 6. `.gif { ... }`: This section applies styles to elements with the class "gif." - `width: 40%;`: Sets the width of the element to 40% of its container's width. - `border-radius: 10px;`: Rounds the corners of the element. 7. `button { ... }`: This section defines styles for button elements. - `padding: 5px 5px;`: Adds 5 pixels of padding on the top and bottom and 5 pixels of padding on the left and right. - `border-radius: 5px;`: Rounds the corners of the button. - `border: 1px solid gray;`: Creates a solid gray border around the button. - `cursor: pointer;`: Changes the mouse cursor to a hand pointer when hovering over the button. - `transition: 1s;`: Adds a smooth transition effect with a duration of 1 second. 8. `#red { ... }`: This section defines styles for an element with the ID "red." - `color: red;`: Sets the text color to red. - `margin-bottom: 5px;`: Adds 5 pixels of margin at the bottom of the element. - `animation: moveLeftAndRight 4s ease-in-out;`: Applies a CSS animation called "moveLeftAndRight" with a duration of 4 seconds and an ease-in-out timing function. - `text-shadow: 2px 2px 4px rgba(124, 111, 111, 0.81);`: Adds a text shadow effect. 9. `@keyframes moveLeftAndRight { ... }`: This section defines the "moveLeftAndRight" animation used in the "#red" section. - It specifies four keyframes that will gradually transform the element's position. 10. `button:hover { ... }`: This section defines styles for button elements when hovered over with the mouse. - `color: #fff;`: Sets the text color to white. - `background-color: rgba(0, 0, 0, 0.923);`: Sets the background color to a translucent black. - `box-shadow: 2px 2px 2px 2px rgba(128, 128, 128, 0.477);`: Adds a box shadow with a light gray color. 11. `input { ... }`: This section defines styles for input fields. - `text-align: center;`: Centers the text inside the input field. - `border: none;`: Removes the default border of the input field. - `padding: 5px 5px;`: Adds 5 pixels of padding on the top and bottom and 5 pixels of padding on the left and right. - `border: 1px solid gray;`: Creates a solid gray border around the input field. - `outline: none;`: Removes the default outline when the input field is focused. - `border-radius: 5px;`: Rounds the corners of the input field. 12. `.cl { ... }`: This section applies styles to elements with the class "cl." - `color: red;`: Sets the text color to red. - `animation: 8s blink infinite;`: Applies a CSS animation called "blink" that makes the element's text blink indefinitely. That's a basic explanation of the CSS code provided. CSS is used to control the appearance and layout of the HTML elements on the webpage.
# Javascript Code.
// script for generating and verifying text function generateRandomText() { const length = 8; const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const lowerCase = "abcdefghijklmnopqrstuvwxyz"; const number = "0123456789"; const symbol = "@#$%^&()_+~|}{[]></-="; let textgenerated = ""; textgenerated += upperCase[Math.floor(Math.random() * upperCase.length)]; textgenerated += lowerCase[Math.floor(Math.random() * lowerCase.length)]; textgenerated += number[Math.floor(Math.random() * number.length)]; textgenerated += symbol[Math.floor(Math.random() * symbol.length)]; const allChars = upperCase + lowerCase + number + symbol; while (length > textgenerated.length) { textgenerated += allChars[Math.floor(Math.random() * allChars.length)]; } return textgenerated; } function submit() { var userText = document.getElementById("texter").value; var generatedText = document.getElementById("ran-txt").value; if (generatedText === userText) { // Open Your website in a new tab // Paste Your website link below window.open('https://bbttait2kz9euzfplrkwwa.on.drv.tw/Rising%20Coders%20Era/public/', '_blank'); } else { // alert("Text did not match!!"); document.getElementById("red").innerHTML = "Text did not match, please try again"; innerHTML = document.getElementById("texter").value = ""; } // Regenerate random text for next verification document.getElementById("ran-txt").value = generateRandomText(); } // Initialize random text on page load document.getElementById("ran-txt").value = generateRandomText();
@ Javascript Code Explanation:
1. `function generateRandomText() { ... }`: This function is responsible for generating a random text that will be displayed on the webpage and later used for verification. - It defines four strings (`upperCase`, `lowerCase`, `number`, and `symbol`) containing characters from which the random text will be composed. - It creates an empty string `textgenerated` to store the random text. - It appends one character from each category (uppercase, lowercase, number, and symbol) to the `textgenerated` string. - Then, it repeatedly adds random characters from the `allChars` string (which contains all possible characters) to the `textgenerated` string until it reaches a specific `length` of 8 characters. - Finally, it returns the generated random text. 2. `function submit() { ... }`: This function is triggered when the user clicks the "I am not a Bot" button to submit their input. - It retrieves the user's input from the text input field with the ID "texter" and the previously generated random text from the text input field with the ID "ran-txt." - It checks if the user's input matches the generated random text. If they match, a new webpage is opened in a new tab. Otherwise, an error message is displayed on the page. - After verification, the function generates a new random text for the next verification. 3. `document.getElementById("ran-txt").value = generateRandomText();`: This line initializes the random text on page load by calling the `generateRandomText()` function and setting the generated text as the value of the text input field with the ID "ran-txt." In summary, this JavaScript code controls the verification process on the webpage. It generates a random text containing uppercase letters, lowercase letters, numbers, and symbols. The user is asked to enter this random text in an input field, and if they enter it correctly, a new webpage is opened in a new tab. If there is an error, a message is displayed, and a new random text is generated for the next verification.